<template>
    <div class="footer">
        <div class="mask" v-show="maskShow" @click="closeShopCar"></div>
        <div class="carTxt">
            <div class="empty">
                <span class="emptyCar" v-show="!totalShow">购物车是空的</span>
                <span class="total" v-show="totalShow">
                    <span>￥{{price}}</span>
                </span>
            </div>
        </div>
        <div :class="['sendBtn',checkIdArr2[shopId].length!=0?'active2':'disabled']" @click="clearAccount($event)">去结算</div>
        <div class="bg"></div>
        <div :class="['shopCar',totalShow==true?'active1':'']" @click="shopCar">
            <i class="carNum" v-show="totalShow">{{carNum}}</i>
        </div>
        <div class="content">
            <i class="triangle"></i>
            <div class="footTop">
                <span :class="['allsel',checkIdArr.length===checkIdArr2[shopId].length?'checked':'']" @click="allsel">全选</span>
                <p class="seledNum" v-show="selNum!=0">(已选{{selNum}}件，共{{0.75*selNum}}kg)</p>
                <a class="clearCar" @click="alertShow=true">清空购物车</a>
            </div>
            <div class="footBody">
                <ul class="shopCarUl">
                    <li v-if="key!=='carNum'" v-for="(val,key) in cars[shopId]" :key="val.id" class="shopCarLi">
                        <span :class="['sel','allsel',checkIdArr2[shopId].indexOf(val)>=0?'checked':'']" @click="sel(val)"></span>
                        <div class="goods">
                            <div class="leftImg">
                                <img :src="imgUrl+val.img">
                            </div>
                            <div class="rightContent">
                                <div class="goodsTitle">{{val.title}}</div>
                                <div class="priceWrap">
                                    <div class="price">{{val.price}}</div>
                                </div>
                            </div>
                        </div>
                        <div class="numsChange">
                            <span class="reduce numsChangeBtn" @click="red(val)"></span>
                            <label class="goodsNum">{{val.num}}</label>
                            <span class="add numsChangeBtn" @click="add(val)"></span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="attLqWrap" v-show="alertShow">
            <div class="alert">
                <div class="g">清空购物车中所有商品？</div>
                <div class="gBtn">
                    <div class="cancel gBtns" @click="alertShow=false">取消</div>
                    <div class="atten gBtns" @click="attenEvent">清空</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import $ from 'jquery'
export default {
    props:['shopId'],
    computed:{
        checkIdArr(){
            const goods=this.cars[this.shopId];
            var checkIdArr=[];
            for(let key in goods){
                if(key!=='carNum'){
                    let ids=goods[key];
                    checkIdArr.push(ids)
                }
            }
            return checkIdArr;
        },
        price(){
            const goods=this.checkIdArr2[this.shopId];
            var price=0;
            for(let key in goods){
                let tmp=goods[key].price*goods[key].num;
                price+=tmp;
            }
                return price.toFixed(1);
        },
        totalShow(){
            if(this.carNum==0){
                return false;
            }else{
                return true;
            }
        },
        carNum(){
            const goods=this.cars[this.shopId];
            var carNum=0;
            for(let key in goods){
                if(key!=='carNum'){
                    carNum+=goods[key].num;
                }
            }
            this.$set(this.cars[this.shopId],'carNum',carNum);
            return carNum;
        },
        selNum(){
            const goods=this.checkIdArr2[this.shopId];
            var selNum=0;
            for(let key in goods){
                selNum+=goods[key].num;
            }
            return selNum;
        }
    },
    data(){
        return {
            maskShow:false,
            isChecked:true,
            alertShow:false
        }
    },
    methods:{
        add(goods){
            goods.num++;
        },
        red(goods){
            goods.num--;
            let idIndex = this.checkIdArr2[this.shopId].indexOf(goods);
            if(goods.num==0&&$('.shopCarLi').length!==1){
                this.$delete(this.cars[this.shopId],goods.id);
                this.checkIdArr2[this.shopId].splice(idIndex, 1);
                setTimeout(()=>{
                    $('.shopCar').css('transition','all 0s')
                    $('.shopCar').css('transform','translateY('+(-$('.content').height()-$('.bg').height()-$('.triangle').height())+'px)');
                },100);
            }
            if($('.shopCarLi').length==1&&goods.num==0){
                this.$delete(this.cars[this.shopId],goods.id);
                this.checkIdArr2[this.shopId].splice(idIndex, 1);
                this.closeShopCar();
            }
        },
        shopCar(){
            $('.shopCar').css('transition','transform 0.5s')
            if($('.shopCarLi').length==0){
                return;
            }
            this.maskShow=true;
            $('.content').addClass('move');
            $('.carTxt').addClass('move1');
            $('.shopCar').css('transform','translateY('+(-$('.content').height()-$('.bg').height()-$('.triangle').height())+'px)');
            
        },
        closeShopCar(){
            $('.shopCar').css('transition','transform 0.5s')
            this.maskShow=false;
            $('.content').removeClass('move');
            $('.carTxt').removeClass('move1');
            $('.shopCar').css('transform','translateY(0px)')
        },
        allsel(){
            this.isChecked=!this.isChecked;
            if(!this.isChecked){
                this.checkIdArr2[this.shopId]=[];
            }
            if(this.isChecked){       
                this.checkIdArr2[this.shopId]=this.checkIdArr.concat();
            }
        },
        sel(val){
            let idIndex = this.checkIdArr2[this.shopId].indexOf(val);
            if (idIndex >= 0) {
                this.checkIdArr2[this.shopId].splice(idIndex, 1);
            } else {
                this.checkIdArr2[this.shopId].push(val);
            }
            if(this.checkIdArr2[this.shopId].length==this.checkIdArr.length){
                this.isChecked=true;
            }else{
                this.isChecked=false;
            }
        },
        attenEvent(){
            $.each(this.checkIdArr2[this.shopId],(index,val)=>{
                val.num=0;
            })
            this.$set(this.cars,this.shopId,{});
            this.checkIdArr2[this.shopId]=[];
            this.closeShopCar();
            this.alertShow=false;
        },
        clearAccount(e){
            if(!$(e.target).hasClass('disabled')){
                this.$router.push('/accounts/'+this.shopId);
            }
        }
    }
}
</script>

<style scoped lang='scss'>
.footer {
    position: fixed;
    z-index: 2001;
    left: 0;
    right: 0;
    bottom: 0;
    height: 117px;
    background-color: #fff;
    .mask {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        width: 750px;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
    }
    .content {
        position: absolute;
        z-index: 20;
        left: 0;
        right: 0;
        background-color: #fff;
        border-radius: 23px 23px 0 0;
        transform: translateY(0px);
        transition: all 0.5s;
        .triangle {
            position: absolute;
            left: 68px;
            top: -16px;
            width: 25px;
            height: 16px;
            background: url(/static/home/a.png) 0 0 no-repeat;
            background-size: 25px 16px;
        }
        .allsel {
            position: absolute;
            top: 0;
            left: 0;
            padding-left: 93px;
            padding-right: 46px;
            font-size: 28px;
            color: #333;
            background-image: url(/static/home/unchecked.png);
            background-size: 50px 50px;
            background-repeat: no-repeat;
            background-position: 21px 50%;
        }
        .checked {
            background-image: url(/static/home/checked.png);
        }
        .footTop {
            position: relative;
            min-height: 84px;
            line-height: 81px;
            color: #666;
            &::after {
                height: 3px;
                content: '';
                width: auto;
                border-top: 3px solid #f5f5f5;
                position: absolute;
                bottom: 0;
                right: 0;
                left: 0;
                z-index: 10;
            }
            .seledNum {
                position: absolute;
                left: 173px;
                font-size: 28px;
                color: #666;
                margin: 0;
                padding: 0;
            }
            .clearCar {
                position: absolute;
                right: 0;
                top: 0;
                padding: 0 28px 0 44px;
                background: url(/static/home/delete.png) 0 center no-repeat;
                background-size: 37px;
                color: #999;
                font-size: 28px;
            }
        }
        .footBody {
            position: relative;
            overflow: hidden;
            background-color: #fff;
            ul {
                margin: 0;
                padding: 0;
                height: auto;
                max-height: 810px;
                overflow-y: scroll;
                li {
                    margin: 0;
                    position: relative;
                    padding: 23px 23px 23px 97px;
                    color: #333;
                    list-style: none;
                    &::after {
                        height: 3px;
                        content: '';
                        width: auto;
                        border-top: 3px solid #f5f5f5;
                        position: absolute;
                        bottom: 0;
                        right: 23px;
                        left: 97px;
                        z-index: 10;
                    }
                    .sel {
                        padding: 0;
                        top: 23px;
                        width: 117px;
                        height: 117px;
                    }
                    .goods {
                        position: relative;
                        table-layout: fixed;
                        width: 100%;
                        border-collapse: collapse;
                        .leftImg {
                            height: 117px;
                            width: 117px;
                            position: absolute;
                            top: 0;
                            border-radius: 9px;
                            overflow: hidden;
                            img {
                                width: 117px;
                                height: 117px;
                            }
                        }
                        .rightContent {
                            padding-left: 140px;
                            min-height: 117px;
                            position: relative;
                            .goodsTitle {
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                padding-right: 11px;
                                line-height: 40px;
                                font-size: 32px;
                                color: #333;
                                margin-bottom: 11px;
                            }
                            .priceWrap {
                                line-height: 0;
                                min-height: 40px;
                                margin-top: 23px;
                                .price {
                                    margin-right: 11px;
                                    position: absolute;
                                    line-height: 40px;
                                    color: #ff3434;
                                    font-size: 32px;
                                    display: inline-block;
                                    left: 140px;
                                    bottom: 0;
                                }
                            }
                        }
                    }
                    .numsChange {
                        position: absolute;
                        right: 0;
                        bottom: 124px;
                        display: inline-block;
                        .numsChangeBtn {
                            display: inline-block;
                            position: absolute;
                            padding: 23px;
                            text-indent: -9999px;
                            background: url(/static/details/addNumSprite.png) no-repeat;
                            background-color: transparent;
                            background-size: 400% 100%;
                            width: 65px;
                            height: 65px;
                            vertical-align: top;
                            border: 0;
                            background-origin: content-box;
                        }
                        .reduce {
                            right: 134px;
                            background-position: -97px 0;
                        }
                        .add {
                            right: 0;
                            background-position: 0 0;
                        }
                        .goodsNum {
                            display: inline-block;
                            position: absolute;
                            right: 88px;
                            margin-top: 23px;
                            color: #666;
                            font-size: 37px;
                            padding: 0;
                            width: 70px;
                            height: 65px;
                            overflow: hidden;
                            text-align: center;
                            line-height: 65px;
                            vertical-align: top;
                        }
                    }
                }
            }
        }
    }
    .move {
        transform: translateY(-100%);
    }
    .shopCar {
        transform: translateY(0px);
        position: absolute;
        z-index: 50;
        left: 0;
        top: -35px;
        width: 187px;
        height: 134px;
        background: url(/static/details/cart.png) 23px 11px no-repeat;
        background-size: 117px 292px;
        transition: transform 0.5s;
        .carNum {
            position: absolute;
            top: 0;
            left: 101px;
            padding: 0 9px;
            height: 35px;
            line-height: 35px;
            overflow: hidden;
            text-align: center;
            color: #fff;
            background-color: #FB4E44;
            border-radius: 35px;
            font-size: 23px;
        }
    }
    .active1 {
        height: 136px;
        background-position: 23px -163px;
    }
    .pulse{
        animation:cartIconScale 220ms forwards;
        transform-origin:center bottom;
        @keyframes cartIconScale {
            0%{
                transform: scale(1,1);
            }
            50%{
                transform: scale(1.2,1.2);
            }
            100%{
                transform: scale(1,1);
            }
        }
    }
    .bg {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 117px;
        background-color: #fff;
        z-index: 39;
    }
    .carTxt {
        position: absolute;
        z-index: 40;
        left: 165px;
        bottom: 0;
        line-height: 117px;
        max-height: 117px;
        font-size: 50px;
        color: #ff3434;
        transform: translateX(0px);
        transition: all 0.5s;
        .empty {
            line-height: 117px;
            .emptyCar {
                font-size: 33px;
                color: #999;
            }
            .total {
                font-size: 50px;
                color: #ff3434;
            }
        }
    }
    .move1 {
        transform: translateX(-140px);
    }
    .sendBtn {
        background: -webkit-linear-gradient(90deg, rgba(170, 170, 170, 1), rgba(204, 204, 204, 1));
        position: absolute;
        z-index: 40;
        right: 0;
        width: 257px;
        text-align: center;
        color: #fff;
        line-height: 117px;
        font-size: 37px;
        font-weight: bold;
    }
    .active2 {
        background: -webkit-linear-gradient(90deg, rgba(0, 190, 52, 1), rgba(0, 203, 30, 1));
    }
    .attLqWrap {
        position: fixed;
        z-index: 2003;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        width: 750px;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.8);
        .alert {
            z-index: 3000;
            position: relative;
            width: 632px;
            color: #000;
            font-size: 34px;
            line-height: 44px;
            border-radius: 18px;
            background-color: #fff;
            overflow: hidden;
            text-align: center;
            left: 59px;
            top: 40%;
            .g {
                line-height: 44px;
                padding: 70px 80px 75px 80px;
            }
            .gBtn {
                position: relative;
                height: 103px;
                line-height: 103px;
                font-size: 40px;
                color: #47b34f;
                border-radius: 0 0 21px 21px;
                display: flex;
                .gBtns {
                    font-size: 35px;
                    height: 103px;
                    width: 50%;
                    border-top: 2px solid #d9d9d9;
                }
                .cancel {
                    border-right: 2px solid #d9d9d9;
                    color: #999;
                }
            }
        }
    }
}
</style>
